<template>
  <div>
    <div class="demo-inner-divider">input 常规输入框</div>
    <div class="input">
      <div>
        <p>大型:</p>
        <e-input
          v-model="value0"
          placeholder="请输入"
          size="large"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
      <div>
        <p>默认:</p>
        <e-input
          v-model="value1"
          placeholder="请输入"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
      <div>
        <p>中型:</p>
        <e-input
          v-model="value2"
          placeholder="请输入"
          size="middle"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
      <div>
        <p>小型:</p>
        <e-input
          v-model="value3"
          placeholder="请输入"
          size="small"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>
    <div class="input">
      <div>
        <p>可清空:</p>
        <e-input
          v-model="value4"
          clearable
          placeholder="请输入"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
      <div>
        <p>不可编辑:</p>
        <e-input
          v-model="value5"
          disabled
          placeholder="请输入"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
      <div>
        <p>无边框:</p>
        <e-input
          v-model="value6"
          :border="false"
          placeholder="请输入"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>

    <div class="demo-inner-divider">多行文本 textarea</div>
    <div class="explainText">文本域:<span>通过设置属性 rows 控制文本域默认显示的行数。</span></div>
    <div class="input">
      <div>
        <e-input
          v-model="value7"
          placeholder="请输入"
          type="textarea" 
          :rows="4"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>

    <div class="explainText">适应文本高度的文本域: <span>通过设置属性 autosize，文本域会自动适应高度的变化。</span></div>
    <div class="input">
      <div>
        <e-input
          v-model="value8"
          placeholder="请输入"
          type="textarea" 
          :autosize="true"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
      <div>
        <e-input
          v-model="value9"
          placeholder="请输入"
          type="textarea"
          :autosize="{minRows: 2,maxRows: 5}"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>

    <div class="explainText">输入长度限制:<span>开启属性 show-word-limit 可以显示字数统计，需配合 maxlength 属性来限制输入长度。</span></div>
    <div class="input">
      <div>
        <e-input
          v-model="value10"
          placeholder="请输入"
          maxlength="10" 
          show-word-limit
          type="textarea" 
          :rows="4"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>

    <div class="demo-inner-divider">密码输入框</div>
    <div class="input">
      <div>
        <e-input
          v-model="value11"
          placeholder="请输入"
          type="password"
          password="true"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>

    <div class="demo-inner-divider">带Icon的输入框</div>
    <div class="explainText">带时钟输入框:<span></span></div>
    <div class="input">
      <div>
        <e-input
          v-model="value12"
          placeholder="请输入"
          icon="clock"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>

    <div class="explainText">设置前缀及后缀图标:<span>通过设置 prefix 和 suffix 及同名 slot 设置前缀及后缀图标。</span></div>
    <div class="input">
      <div>
        <e-input
          v-model="value13"
          placeholder="请输入"
          prefix="member"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
      <div>
        <e-input
          v-model="value14"
          placeholder="请输入"
          suffix="search"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>
    <div class="demo-inner-divider">搜索型输入框:</div>
    <div class="explainText">搜索型输入框:<span>开启 search 属性，可以设置为搜索型输入框。</span></div>
    <div class="input">
      <div>
        <e-input
          v-model="value15"
          placeholder="请输入"
          icon="search"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
      <div>
        <e-input
          v-model="value16"
          placeholder="请输入"
          search 
          enter-button
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
      <div>
        <e-input
          v-model="value17"
          placeholder="请输入"
          search 
          enter-button="搜索"
          style="width: 200px;">
        </e-input>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>
    <div class="demo-inner-divider">复合型输入框:</div>
    <div class="explainText">与select结合:<span>通过前置和后置的 slot 可以实现复合型的输入框。</span></div>
    <div class="input">
      <div>
        <e-input
          v-model="value18"
          placeholder="请输入"
          style="width: 400px;">
          <template #prepend>
            <e-select
              v-model="option1"
              style="width: 100px">
              <e-option
                v-for="item in httpList"
                :value="item.value"
                :key="item.value">{{ item.label }}</e-option>
            </e-select>
          </template>
          <template #append>
            <e-select
              v-model="option2"
              style="width: 100px">
              <e-option
                v-for="item in comList"
                :value="item.value"
                :key="item.value">{{ item.label }}</e-option>
            </e-select>
          </template>
        </e-input>
      </div>
    </div>
    <div class="explainText">输入时格式化展示:<span>结合 tooltip 组件，实现一个数值输入框，方便内容超长时的全量展现。</span></div>
    <div class="input">
      <div>
        <e-tooltip trigger="focus" :content="formatNumber"  :open-delay="500" light place="top-left">
          <e-input
            v-model="value19"
            placeholder="请输入"
            icon="search"
            style="width: 200px;">
            {{formatNumber}}
          </e-input>
          <span>这里是输入规范提示文字</span>
        </e-tooltip>
      </div>
    </div>

    <div class="demo-inner-divider">联想输入框：</div>
    <div class="input">
      <div>
        <e-autoComplete
          v-model="value"
          :data="autoArr"
          @on-search="handleSearch"
          transfer
          placeholder="请输入"
          style="width: 200px"
        ></e-autoComplete>
        <span>这里是输入规范提示文字</span>
      </div>
    </div>
    
    <div class="demo-inner-divider">输入帮助：</div>
    <div class="explainText">参数项帮助：<span>需要对参数项进行解释说明；输入帮助文字信息较多，但不是必须展示出的输入帮助信息。</span></div>
    <div class="input">
      <div style="display: flex; align-items: center;">
        <div>
          名称1：
        </div>
        <e-input
          v-model="value20"
          placeholder="请输入"
          icon="search"
          style="width: 200px;">
        </e-input>
        <div style="padding-left: 5px;">
          <e-tooltip 
            :width="200" 
            content="需要对参数项进行解释说明；输入帮助文字信息较多，但不是必须展示出的输入帮助信息。" 
            light>
            <e-icon size="10" type="warning-circle"> </e-icon>
          </e-tooltip>
        </div>
      </div>
    </div>
    <div class="explainText">输入框内容帮助：<span>需要对输入参数项进行解释说明；输入帮助文字信息较多，但不是必须展示出的输入帮助信息。</span></div>
    <div class="input">
      <div style="display: flex; align-items: center;">
        <div>
          名称2：
        </div>
        <div style="padding-right: 5px;">
          <e-tooltip 
            :width="200" 
            content="需要对输入参数项进行解释说明；输入帮助文字信息较多，但不是必须展示出的输入帮助信息。" 
            light>
            <e-icon size="10" type="warning-circle"></e-icon>
          </e-tooltip>
        </div>
        <e-input
          v-model="value21"
          placeholder="请输入"
          icon="search"
          style="width: 200px;">
        </e-input>
      </div>
    </div>
    <input-md class="markdown-body"></input-md>
  </div>
</template>
<script>
import inputMd from '../../docs/input.md'
export default {
  name: 'DemoInput',
  components: {
    inputMd,
  },
  data() {
    return {
      value: '',
      value0: '',
      value1: '',
      value2: '',
      value3: '',
      value4: 'Hello World',
      value5: '不可编辑内容',
      value6: '',
      value7: '',
      value8: '',
      value9: '',
      value10: '',
      value11: '',
      value12: '',
      value13: '',
      value14: '',
      value15: '',
      value16: '',
      value17: '',
      value18: '',
      value19: '',
      value20: '',
      value21: '',
      value22: '',
      value23: '',
      autoArr: [],
      httpList: [
        {
          value: 'http://',
          label: 'http://'
        },
        {
          value: 'https://',
          label: 'https://'
        }
      ],
      comList: [
        {
          value: '.com',
          label: '.com'
        },
        {
          value: '.org',
          label: '.org'
        },
        {
          value: '.io',
          label: '.io'
        }
      ],
      option1:'http://',
      option2:'.com',
    }
  },
  computed: {
    formatNumber () {
      if (this.value19 === '') {
        return '你还没输入，请输入';
      } else {
        const re = /(?=(?!\b)(\d{3})+$)/g;
        return this.value19.replace(re, ',');
      }
      
    }
  },
  methods: {
    handleSearch(value) {
      this.autoArr = !value ? [] : [value, value + value, value + value + value]
    },
  }
}
</script>
<style scoped>
.input {
  display: flex;
  flex-direction: row;
  margin-bottom: 30px;
}
.input > div {
  margin-right: 50px;
}
.input p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98, 54, 255, 1);
  margin-bottom: 10px;
}

.input span {
  display: flex;
  font-size: 12px;
  color: #999999;
}

.explainText{
  display: flex;
  font-size: 14px;
  color:#9013FE;
  margin: 10px 0px;
}
.explainText > span{
  font-size: 14px;
  color:#6F7D96;
  padding-left:10px;
}
</style>
